<template>
  <div>
    <el-row type="flex" justify="center" v-if="!type">
      <el-col :span="1" class="validInput">
        <el-input ref="input0" @keydown.delete.native="deleteValue('input0','input0')" @keyup.native="changeValue($event,'input0','input1')" v-model.trim.number="input0"  />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input1" @keydown.delete.native="deleteValue('input1','input0')" @keyup.native="changeValue($event,'input1','input2')" v-model.trim.number="input1"  />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input2" @keydown.delete.native="deleteValue('input2','input1')" @keyup.native="changeValue($event,'input2','input3')" v-model.trim.number="input2"  />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input3" @keydown.delete.native="deleteValue('input3','input2')" @keyup.native="changeValue($event,'input3','input3')" v-model.trim.number="input3"  />
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" v-if="type">
      <el-col :span="1" class="validInput">
        <el-input ref="input0" @keydown.delete.native="deleteValue('input0','input0')" @keyup.native="changeValue($event,'input0','input1')" v-model.trim.number="input0" type="password" />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input1" @keydown.delete.native="deleteValue('input1','input0')" @keyup.native="changeValue($event,'input1','input2')" v-model.trim.number="input1" type="password" />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input2" @keydown.delete.native="deleteValue('input2','input1')" @keyup.native="changeValue($event,'input2','input3')" v-model.trim.number="input2" type="password" />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input3" @keydown.delete.native="deleteValue('input3','input2')" @keyup.native="changeValue($event,'input3','input4')" v-model.trim.number="input3" type="password" />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input4" @keydown.delete.native="deleteValue('input4','input3')" @keyup.native="changeValue($event,'input4','input5')" v-model.trim.number="input4" type="password" />
      </el-col>
      <el-col :span="1" class="validInput">
        <el-input ref="input5" @keydown.delete.native="deleteValue('input5','input4')" @keyup.native="changeValue($event,'input5','input5')" v-model.trim.number="input5" type="password" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    props: {
      type: {
        type: Boolean,
        require: true,
        default: false
      },
    },
    data(){
      return{
        //邮箱验证码输入框
        input0: '',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: ''
      }
    },
    methods:{
      deleteValue (inputValue, previousItem) { // 键盘按下时$event，当前input，上一个input
        // console.log(this[inputValue], this[previousItem])
        if (this[inputValue].length > 0) { // 当前有值，清空之
          this[inputValue] = ''
        } else { // 当前没有值，光标跳转到上一个input，并清空该input值
          this.$nextTick(() => {
            this.$refs[previousItem].focus()
            this[previousItem] = ''
            this[inputValue] = ''
          })
        }
      },
      changeValue (e, inputValue, nextItem) { // 键盘抬起时$event，当前input，下一个input
        // console.log(e.keyCode, this[inputValue], this[nextItem])
        if (e.keyCode !== 8) {
          this.$nextTick(() => {
            this.$refs[nextItem].focus() // 截取当前值最后一位，跳到下一个input
            this[inputValue] = (this[inputValue]).toString().slice(-1)
          })
        }
      },
      cleanInput(){
        this.input0='';
        this.input1='';
        this.input2='';
        this.input3='';
        this.input4='';
        this.input5='';
      }
    },
    computed:{
      checkInput(){
        if(this.type){
          const { input0,input1,input2,input3,input4,input5 } = this;
          return { input0,input1,input2,input3,input4,input5 };
        }else{
          const { input0,input1,input2,input3, } = this;
          return { input0,input1,input2,input3 };
        }
      }
    },
    watch:{
      checkInput: {
        handler(newValue) {
          let inputValue;
          if(this.type){
              inputValue = newValue.input0 + newValue.input1 +newValue.input2 +newValue.input3 + newValue.input4 + newValue.input5;
              this.$emit("giveInputValue",inputValue)
          }else {
              inputValue = newValue.input0 + newValue.input1 +newValue.input2 +newValue.input3;
          }
          this.$emit("giveInputValue",inputValue)
        },
        deep: true,
        immediate: true,
      }
    }
  }
</script>

<style lang="scss" scoped>
  .validInput{
    margin: 0 8px;
    ::v-deep .el-input__inner{
      width: 30px;
      padding: 0 10px;
    }
  }
</style>
